<template>
  <div class="video-thumbnail">
    <img v-if="thumbnailUrl" :src="thumbnailUrl" alt="视频缩略图" class="thumbnail-image" :style="imageStyle" />
    <div v-else class="default-thumbnail" :style="defaultStyle">
      <i class="el-icon-video-play"></i>
      <span>{{ extractFilename(videoUrl) }}</span>
    </div>
    <div class="play-icon">
      <el-icon><video-play /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { VideoPlay } from '@element-plus/icons-vue';

const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  },
  thumbnailUrl: {
    type: String,
    default: ''
  },
  aspectRatio: {
    type: String,
    default: '16:9'
  }
});

// 提取文件名
const extractFilename = (url) => {
  if (!url) return '';
  const parts = url.split('/');
  const filename = parts[parts.length - 1];
  // 如果有查询参数，去掉它们
  return filename.split('?')[0];
};

// 从URL获取视频类型
const videoType = computed(() => {
  if (!props.videoUrl) return '';
  const filename = extractFilename(props.videoUrl).toLowerCase();
  if (filename.endsWith('.mp4')) return 'mp4';
  if (filename.endsWith('.webm')) return 'webm';
  if (filename.endsWith('.ogg')) return 'ogg';
  if (filename.endsWith('.mov')) return 'mov';
  if (filename.endsWith('.avi')) return 'avi';
  if (filename.endsWith('.flv')) return 'flv';
  if (filename.endsWith('.wmv')) return 'wmv';
  if (filename.endsWith('.mkv')) return 'mkv';
  return '';
});

// 计算图片样式
const imageStyle = computed(() => {
  return {
    width: '100%',
    height: '100%',
    objectFit: 'cover'
  };
});

// 默认缩略图样式
const defaultStyle = computed(() => {
  return {
    backgroundColor: getBackgroundColor(videoType.value)
  };
});

// 基于视频类型获取背景颜色
const getBackgroundColor = (type) => {
  const colorMap = {
    mp4: '#3498db',
    webm: '#2ecc71',
    ogg: '#e74c3c',
    mov: '#9b59b6',
    avi: '#f39c12',
    flv: '#1abc9c',
    wmv: '#34495e',
    mkv: '#e67e22',
    default: '#7f8c8d'
  };
  return colorMap[type] || colorMap.default;
};
</script>

<style scoped>
.video-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.thumbnail-image {
  transition: transform 0.3s ease;
}

.video-thumbnail:hover .thumbnail-image {
  transform: scale(1.05);
}

.default-thumbnail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  padding: 10px;
}

.default-thumbnail i {
  font-size: 36px;
  margin-bottom: 10px;
}

.default-thumbnail span {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}

.video-thumbnail:hover .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}
</style>